<template>
    <el-form ref="orderNumDateFormRef" :model="orderNumDateForm" label-width="100px" style="width: 1000px">
        <el-row :gutter="10">
            <el-col :span="6">
                <el-form-item label="订单时间开始">
                    <el-date-picker v-model="orderNumDateForm.orderTimeStart" type="date"
                        value-format="YYYY-MM-DD" placeholder="请选择" />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="订单时间开始">
                    <el-date-picker v-model="orderNumDateForm.orderTimeEnd" type="date"
                        value-format="YYYY-MM-DD" placeholder="请选择" />
                </el-form-item>
            </el-col>
            <el-button type="primary" @click="orderNumStatistic">查询</el-button>
        </el-row>
    </el-form>
    <div id="orderNumChart" style="width: 500px;height:350px;">
        <v-chart ref="orderNumChart"></v-chart>
    </div>
    
    <el-form ref="orderMoneyDateFormRef" :model="orderMoneyDateForm" label-width="100px" style="width: 1000px">
        <el-row :gutter="10">
            <el-col :span="6">
                <el-form-item label="订单时间开始">
                    <el-date-picker v-model="orderMoneyDateForm.orderTimeStart" type="date"
                        value-format="YYYY-MM-DD" placeholder="请选择" />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="订单时间开始">
                    <el-date-picker v-model="orderMoneyDateForm.orderTimeEnd" type="date"
                        value-format="YYYY-MM-DD" placeholder="请选择" />
                </el-form-item>
            </el-col>
            <el-button type="primary" @click="orderMoneyStatistic">查询</el-button>
        </el-row>
    </el-form>
    <div id="orderMoneyChart" style="width: 500px;height:350px;">
        <v-chart ref="orderMoneyChart"></v-chart>
    </div>
</template>
 
<script setup>
    import { onMounted, reactive,ref,getCurrentInstance} from 'vue'
    const {proxy} = getCurrentInstance();
    // 订单统计时间表单
    const orderNumDateForm = reactive({
        orderTimeStart: '',
        orderTimeEnd: '',
    })
    // 订单金额时间表单
    const orderMoneyDateForm = reactive({
        orderTimeStart: '',
        orderTimeEnd: '',
    })

    // 订单数量统计图表
    const orderNumChart = ref(null)
     // 订单金额统计图表
     const orderMoneyChart = ref(null)
    
    // 订单数量
    const orderNum = reactive({
        xData: [],
        yData: [],
    })

    // 订单金额
    const orderMoney = reactive({
        xData: [],
        yData: [],
    })
    // 订单数量统计图标坐标轴及其属性定义
    const orderNumChartOptions = () => {
    return {
        title: {
            show: true,
            text: '订单数量统计',
            left: 'center'
        },
        xAxis:
        {
            data: orderNum.xData,
            name: '日期',
            type: 'category',
            axisLine: {
                show: true,
                lineStyle: {
                    type: 'dashed',
                    color: '#DEE6EC',
                },
            },
            boundaryGap: false,
            axisLabel: {
                show: false,
                color: "#666666",
                fontSize: 12,
                interval: orderNum.xData.length > 15 ? 3 : 0,   //主要设置其间隔，间隔为3
            },
            nameTextStyle: {// 名称样式
                fontSize: 12,
                color: '#333333',
                fontWeight: 'bold'
            },
        },
        yAxis: {
            name: '成交量',
            type: 'value',
            minInterval: 1, //分割刻度
            nameTextStyle: {// 名称样式
                fontSize: 12,
                color: '#333333',
                fontWeight: 'bold'
            },
        },
        series: [{
            data: orderNum.yData,
            type: 'line'
        }],
        tooltip : {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        }
        }
    }
    // 订单金额统计图表坐标轴及其属性定义
    const orderMoneyChartOptions = () => {
    return {
        title: {
            show: true,
            text: '订单金额统计',
            left: 'center'
        },
        xAxis:
        {
            data: orderMoney.xData,
            name: '日期',
            type: 'category',
            axisLine: {
                show: true,
                lineStyle: {
                    type: 'dashed',
                    color: '#DEE6EC',
                },
            },
            boundaryGap: false,
            axisLabel: {
                show: false,
                color: "#666666",
                fontSize: 12,
                interval: orderNum.xData.length > 15 ? 3 : 0,   //主要设置其间隔，间隔为3
            },
            nameTextStyle: {// 名称样式
                fontSize: 12,
                color: '#333333',
                fontWeight: 'bold'
            },
        },
        yAxis: {
            name: '成交金额',
            type: 'value',
            minInterval: 1, //分割刻度
            nameTextStyle: {// 名称样式
                fontSize: 12,
                color: '#333333',
                fontWeight: 'bold'
            },
        },
        series: [{
            data: orderMoney.yData,
            type: 'line'
        }],
        tooltip : {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        }
        }
    }
    /**
     * 订单数量统计
     */
const orderNumStatistic = async () => {
    let params ={};
    Object.assign(params,orderNumDateForm);
    if(!params.orderTimeStart || params.orderTimeStart.length == 0){
        delete params.orderTimeStart;
    }
    if(!params.orderTimeEnd || params.orderTimeEnd.length == 0){
        delete params.orderTimeEnd;
    }
    let result = await proxy.Request.request({
        url: proxy.Api.orderNumStatistic,
        params: params
    });
    if (!result) {
        return;
    }
    orderNum.xData = result.data.xdateList
    orderNum.yData = result.data.ydataList
    orderNumChart.value.setOption(orderNumChartOptions())
}


/**
     * 订单金额统计
     */
     const orderMoneyStatistic = async () => {
    let params ={};
    Object.assign(params,orderMoneyDateForm);
    if(!params.orderTimeStart || params.orderTimeStart.length == 0){
        delete params.orderTimeStart;
    }
    if(!params.orderTimeEnd || params.orderTimeEnd.length == 0){
        delete params.orderTimeEnd;
    }
    let result = await proxy.Request.request({
        url: proxy.Api.orderMoneyStatistic,
        params: params
    });
    if (!result) {
        return;
    }
    orderMoney.xData = result.data.xdateList
    orderMoney.yData = result.data.ydataList
    orderMoneyChart.value.setOption(orderMoneyChartOptions())
}
    onMounted(() => {

        
        /* orderNumChart.value.setOption(orderNumChartOptions())
        orderMoneyChart.value.setOption(orderMoneyChartOptions()) */
        orderNumStatistic();
        orderMoneyStatistic();
        //orderMoneyStatistic()
    })
 
</script>

<style scoped>

</style>